<template>
   <div class='container'>
        <div class='account'>
           <p>账户充值</p>
           <p>当前账户余额：{{amount}}元</p>
        </div>
        <div class='switch'>
             <el-button :type="isPrimary" @click='toggle(1)'>支付宝充值</el-button>
             <el-button :type="isWhite" @click='toggle(2)'>银行卡充值</el-button>
        </div>
        <component :is='currentView'></component>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
   </div>
</template>
<script>
import alipay from '@/components/alipay.vue'
import bankcard from '@/components/bankcard.vue'
import { rechargeHistory } from '@/pages/api/index.js'
export default {
    components:{
        alipay,
        bankcard
    },
    data(){
       return{
           currentView:'alipay',
           isPrimary:'primary',
           isWhite:'',
           amount:0,
           form:{
             type:1,
             pageIndex:1,   //页数
             pageSize:10,   //条数
          },
       }
    },
    methods:{
           toggle(index){
                if(index == 1){
                    this.currentView = alipay
                    this.isPrimary = 'primary'
                    this.isWhite = ''
                }else if(index == 2){
                    this.currentView = bankcard
                    this.isPrimary = ''
                    this.isWhite = 'primary'
                }
           }
    },
    created(){
        //页面初始化
            rechargeHistory(this.form).then(res=>{
                  this.amount = res.data.userMoney
                  // this.$store.getters.store_money = this.amount
                  this.$store.commit('setMoney',this.amount)
            })
    }
}
</script>
<style lang='scss' scoped>
  .container{
    //  width:100%;
    //  height:100%;
      padding-bottom:20px;
     box-sizing:border-box;
     background-color: #fff;
     .account{
        width:100%;
        height:60px;
        display:flex;
        padding:0 20px;
        box-sizing:border-box;
        justify-content:space-between;
        align-items:center;
        border-bottom:1px solid #ddd;
     }
     .switch{
        width:100%;
        height:80px;
        display:flex;
        padding:0 20px;
        box-sizing:border-box;
        align-items:flex-end;
        border-bottom:1px solid #ddd;
     }
        /deep/ .el-table th,
   /deep/ .el-table td{
         text-align:center;
   }
  }
</style>
